<template>
  <div>
    <Category :scene="scene"></Category>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div v-show="scene == 0">
        <el-button
          type="primary"
          size="default"
          @click="addSpu"
          :disabled="!categoryStore.c3Id"
          >添加SPU</el-button
        >
        <!-- 添加SPu列表 -->
        <el-table
          border
          stripe
          style="margin: 10px 0px"
          @sort-change="sortChange"
          :data="spuList.records"
        >
          <el-table-column label="序号" type="index"> </el-table-column>
          <el-table-column label="SKU名称" prop="spuName"> </el-table-column>
          <el-table-column label="SKU描述" prop="description">
          </el-table-column>
          <el-table-column label="操作">
            <template #="{ row, $index }">
              <el-button
                type="primary"
                size="small"
                :icon="Plus"
                @click="addSku(row)"
                title="添加SKU"
              ></el-button>
              <el-button
                type="primary"
                size="small"
                @click="updateSpu(row)"
                :icon="Edit"
                title="修改SKU"
              ></el-button>
              <el-button
                type="primary"
                size="small"
                :icon="InfoFilled"
                @click="showDialog(row)"
                title="查看SKU"
              ></el-button>
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="yellowgreen"
                :title="`你确定要删除${row.spuName}`"
                width="300px"
                @confirm="confirm(row)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    size="small"
                    title="删除SPU"
                    :icon="Delete"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          @current-change="getSpuList"
          @size-change="sizeHandler"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[3, 5, 7]"
          layout="prev, pager, next, jumper,->,sizes,total"
          prev-text="上一页"
          next-text="下一页"
          :total="spuList.total"
          background
          :pager-count="7"
        >
        </el-pagination>
      </div>

      <Spu
        v-show="scene == 1"
        @changeScene="changeSceneHandler"
        ref="spuRef"
      ></Spu>
      <Sku
        v-show="scene == 2"
        ref="skuRef"
        @changeScene="changeSceneHandler"
      ></Sku>
      <!--展示SKU的对话框-->
      <el-dialog v-model="dialogTableVisible" title="查看SKU列表">
        <el-table :data="skuList">
          <el-table-column prop="skuName" label="名称" width="150" />
          <el-table-column property="price" label="价格" width="200" />
          <el-table-column property="weight" label="重量" />
          <el-table-column label="默认图片">
            <template #="{ row, $index }">
              <img
                :src="row.skuDefaultImg"
                alt=""
                style="width: 100px; height: 100px"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reqSpuAttr ,reqFindSku,reqDeleteSpu} from "@/api/product/spu/spu";
import { onUnmounted, reactive, ref, watch } from "vue";
//引入仓库
import useCategoryStore from "@/stores/category";
let categoryStore = useCategoryStore();
//引入子组件
import Spu from "./addOrUpdataSpu.vue";
import Sku from "./addSku.vue";
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
  UploadFilled,
  InfoFilled,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
// 切换创景
let scene = ref<number>(0);
  let categortStore = useCategoryStore();
//分液器
//当前页码
let currentPage = ref<number>(1);
//一页展示几条数据
let pageSize = ref<number>(3);
//准备响应式对象：存储服务器返回的数据
let spuList = ref({});
//存储子组件实例
let spuRef = ref<any>();
let skuRef = ref<any>();
//储存skulist 列表
 let skuList=ref([])
 //定义控制对话框显示与隐藏
let dialogTableVisible = ref<boolean>(false);
//监听获取三级菜单数据
watch(
  () => categoryStore.c3Id,
  () => {
    if (categoryStore.c3Id == "") return;
    //获取平台属性方法
    getSpuList();
  }
);
//获取平台属性方法
let getSpuList = async (pager: number = 1) => {
  //整理参数
  currentPage.value = pager;
  let result = await reqSpuAttr(
    currentPage.value,
    pageSize.value,
    categoryStore.c3Id
  );
  //存储数据库返回的数据
  spuList.value = result;
};
//排序
let sortChange = ({ column, prop, order }) => {};
//当每一页展示数据个数发生变化触发[分页器右侧下拉框 ]
const sizeHandler = (limit: number) => {
  pageSize.value = limit;
  //再次发请求获取SPU数据
  getSpuList();
};

//添加SPU按钮的回调
const addSpu = () => {
  scene.value = 1;
  spuRef.value.initAddSpu(categoryStore.c3Id);
};
//更新SPU按钮回调
const updateSpu = (hasSpu) => {
  scene.value = 1;
  spuRef.value.initHasSpuData(hasSpu);
};
// SPU子组件的回调
let changeSceneHandler = ({ scences, flag }) => {
  //切换场景
  scene.value = scences;
  if (flag == "add") {
    //再次获取最新全部SPU的数据
    getSpuList();
  } else {
    //当前是修改
    getSpuList(currentPage.value);
  }
};
//点击sku的回调
const addSku = (spu) => {
  //奇幻场景
  scene.value = 2;
  //获取子组件实例方法
  skuRef.value.initSku(categoryStore.c1Id, categoryStore.c2Id, spu);
};
//查看 sku回调
const showDialog =async (spu) => {
//显示对话框
dialogTableVisible.value = true;
//发请求获取SKU列表
let skus=await reqFindSku(spu.id)
skuList.value=skus
};
// pop子组件按钮确认的回调
const confirm=async (spu)=>{
try {
  //删除某一个Spu
  await reqDeleteSpu(spu.id)
   //提示
   ElMessage({
      type:'success',
      message:`恭喜你删除${spu.spuName}成功`
    });
    //更新数据
    getSpuList();

} catch (error) {
  //提示
  ElMessage({
      type:'error',
      message:`恭喜你删除${spu.spuName}失败`
    });
}
}


//当前SPU路由组件(父组件)销毁的时候，情况仓库数据
onUnmounted(() => {
  //组件销毁的时候。情况仓库里面的数据
  categortStore.c1Id = "";
  categortStore.c2Id = "";
  categortStore.c3Id = "";
  categortStore.c1List = [];
  categortStore.c2List = [];
  categortStore.c3List = [];
});
</script>

<style scoped>
</style>